<template>
	<view class="wrapper">
		<template v-if="carts.length">
			<!-- 收货信息 -->
			<view class="shipment">
				<template v-if="address">
					<view class="dt">收货人:</view>
					<view class="dd meta">
						<text class="name">{{ address.userName }}</text>
						<text class="phone">{{ address.telNumber }}</text>
					</view>
					<view class="dt">收货地址:</view>
					<view class="dd">
						{{ address.provinceName }} {{ address.cityName }} {{ address.countyName }} {{ address.detailInfo }}
					</view>
				</template>
				<button v-else type="primary" style="width: 300rpx;" @click="saveAddress">添加收货地址</button>
			</view>
			<!-- 购物车 -->
			<view class="carts">
				<view class="item">
					<!-- 店铺名称 -->
					<view class="shopname">优购生活馆</view>
					<view class="goods" v-for="(item, index) in carts" :key="item.goods_id">
						<!-- 商品图片 -->
						<image class="pic" :src="item.goods_small_logo"></image>
						<!-- 商品信息 -->
						<view class="meta">
							<view class="name">{{ item.goods_name }}</view>
							<view class="price">
								<text>￥</text>
								{{ item.goods_price }}
								<text>.00</text>
							</view>
							<!-- 加减 -->
							<view class="amount">
								<text class="reduce" @click="decCount(index)">-</text>
								<input type="number" :value="item.goods_number" class="number" disabled />
								<text class="plus" @click="addCount(index)">+</text>
							</view>
						</view>
						<!-- 选框 -->
						<view class="checkbox" @click="toggleState(index)">
							<icon type="success" size="20" :color="item.goods_state ? '#ea4451' : '#ccc'"></icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 其它 -->
			<view class="extra">
				<label class="checkall" @click="toggleAll">
					<icon type="success" :color="allChecked ? '#ea4451' : '#ccc'" size="20"></icon>
					全选
				</label>
				<view class="total">
					合计:
					<text>￥</text>
					<label>{{ amount }}</label>
					<text>.00</text>
				</view>
				<view class="pay" @click="goPayment">结算({{ checkdeCount }})</view>
			</view>
		</template>
		<view class="tips" v-else>
			空空如也~
			<button type="primary" style="width: 300rpx;margin-top: 20rpx;" @click="goGoods">去购物吧</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { differenceWith, isEqual } from 'lodash'
export default {
	data() {
		return {
			order_number: ''
		}
	},
	computed: {
		...mapState('m_cart', ['carts']),
		...mapState('m_user', ['address']),
		...mapGetters('m_cart', ['allChecked', 'checkdeCount', 'amount']),
		...mapGetters('m_user', ['fullAddress']),
		goods() {
			// 过滤商品结算勾选状态
			return this.carts.filter(item => item.goods_state)
		}
	},
	methods: {
		toggleState(index) {
			// 调用 mutations 实现状态切换
			this.$store.commit('m_cart/toggleState', index)
		},
		toggleAll() {
			// 调用 mutations 改变商品的状态
			this.$store.commit('m_cart/toggleAll', this.allChecked)
		},
		decCount(index) {
			this.$store.commit('m_cart/decCount', index)
		},
		addCount(index) {
			this.$store.commit('m_cart/addCount', index)
		},
		goGoods() {
			uni.switchTab({
				url: '/pages/category/index'
			})
		},
		async saveAddress() {
			// #ifndef MP-WEIXIN
			uni.showToast({
				title: '不支持H5',
				icon: 'none'
			})
			// #endif
			// #ifdef MP-WEIXIN
			// 获取用户收货地址
			const [err, { errMsg, ...address }] = await uni.chooseAddress()
			// console.log(res)
			this.$store.commit('m_user/saveAddress', address)
			// #endif
		},
		// 创建订单
		async createOrder() {
			// 验证商品数据是否存在
			if (this.goods.length === 0) {
				return uni.showToast({
					title: '没有选中的商品',
					icon: 'none'
				})
			}
			// 验证收货地址是否存在
			if (!this.fullAddress) {
				return uni.showToast({
					title: '请选择收货地址',
					icon: 'none'
				})
			}
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', {
				order_price: this.amount,
				consignee_addr: this.fullAddress,
				goods: this.goods
			})
			// 订单编号
			if (res.message.order_number) this.order_number = res.message.order_number
		},
		async goPayment() {
			await this.createOrder()
			// 检测订单是否创建成功
			if (!this.order_number) {
				return uni.showToast({
					title: '订单创建失败',
					icon: 'none'
				})
			}
			// 将已经购买的商品移除
			const diff = differenceWith(this.carts, this.goods, isEqual)
			// 存储
			this.$store.commit('m_cart/updateToCart', diff)
			// 获取支付的参数
			const { data: res } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
				order_number: this.order_number
			})
			console.log(res)
			uni.requestPayment({
				...res.message.pay,
				complete() {
					uni.navigateTo({
						url: '/subpkg/pages/order/index'
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.shipment {
	height: 100rpx;
	line-height: 2;
	padding: 30rpx 30rpx 40rpx 30rpx;
	font-size: 27rpx;
	color: #333;
	background-color: #fff;
	background-image: url(http://static.botue.com/ugo/images/cart_border%402x.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;

	.dt {
		width: 140rpx;
		float: left;
		clear: both;
	}

	.dd {
		padding-left: 160rpx;
	}

	.meta {
		padding-right: 50rpx;
	}

	text.phone {
		float: right;
	}
}

.carts {
	background-color: #f4f4f4;
	padding-bottom: 110rpx;
	overflow: hidden;

	.shopname {
		padding: 30rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #333;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
	}

	.goods {
		display: flex;
		padding: 30rpx 20rpx 30rpx 0;
		margin-left: 105rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #fff;

		position: relative;

		.checkbox {
			width: 101rpx;
			height: 100%;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			position: absolute;
			left: -100rpx;
			top: 0;
		}

		&:last-child {
			border-bottom: none;
		}

		.pic {
			width: 200rpx;
			height: 200rpx;
			margin-right: 30rpx;
		}

		.meta {
			flex: 1;
			font-size: 27rpx;
			color: #333;
			position: relative;
		}

		.name {
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			position: absolute;
			bottom: 0;

			color: #ea4451;
			font-size: 33rpx;

			text {
				font-size: 22rpx;
			}
		}

		.amount {
			position: absolute;
			bottom: 0;
			right: 20rpx;

			height: 48rpx;
			text-align: center;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;

			display: flex;
			align-items: center;

			text {
				display: block;
				width: 60rpx;
				line-height: 48rpx;
				font-size: 36rpx;
				color: #ddd;
				text-align: center;
			}

			input {
				width: 60rpx;
				height: 48rpx;
				min-height: 48rpx;
				font-size: 27rpx;
				border-left: 1rpx solid #ddd;
				border-right: 1rpx solid #ddd;
			}
		}
	}
}

.extra {
	position: fixed;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 50px;
	/* #endif */
	left: 0;
	z-index: 9;

	width: 750rpx;
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	font-size: 36rpx;
	border-top: 1rpx solid #eee;
	background-color: #fff;
	color: #333;
	display: flex;

	.checkall {
		width: 140rpx;
		line-height: 1;
		margin-left: 25rpx;
		display: flex;
		align-items: center;

		icon {
			margin-right: 20rpx;
		}
	}

	.total {
		display: flex;
		justify-content: center;
		flex: 1;

		label,
		text {
			color: #ea4451;
			vertical-align: bottom;
			position: relative;
			bottom: -2rpx;
		}

		text {
			position: relative;
			bottom: -3rpx;
			font-size: 24rpx;

			&:first-child {
				margin-left: 10rpx;
			}
		}
	}

	.pay {
		width: 200rpx;
		background-color: #ea4451;
		color: #fff;
	}
}
</style>
